/**
 * Created by xinhuang on 15/6/14.
 */
(function (angular) {
  'use strict';

  angular.module('directives.customActivity.realtime')
    .directive('slider', slider);

  function slider() {
    return {
      restrict: 'E',
      scope: {
        panels: '=',
        divStyle: '@'
      },
      template: '<div class="modules">' +
      '<span ng-hide="panels.length === 1" class="arrow left" ng-click="previous()"></span>' +
      '<ul class="panels">' +
      '<li class="dataItem slide" ' +
      'ng-class="{\'slider-show\': showClassChange($index), ' +
      '\'slider-hide\': hideClassChange($index),' +
      '\'slider-hide-to-left\': hideLeftClassChange($index),' +
      '\'slider-hide-to-right\':hideRightClassChange($index)' +
      '}"' +
      'ng-repeat="panel in panels">' +
      '<div class="center" style="{{divStyle}}" id="{{panel}}"></div>' +
      '</li>' +
      '</ul>' +
      '<span ng-hide="panels.length === 1" class="arrow right" ng-click="next()"></span>' +
      '<ul ng-hide="panels.length === 1" class="tabsli" style="left: calc(50% - {{panels.length*17 / 2}}px);">' +
      '<li ng-repeat="panel in panels" ng-click="goto($index)" ng-class="{\'active\': showClassChange($index) }"></li>' +
      '</ul>' +
      '</div>',
      replace: true,
      link: linkFn
    };

    function linkFn(scope) {
      var currentPanel = 0;

      scope.showClassChange = function($index){
        return $index === currentPanel;
      };
      scope.hideClassChange = function($index){
        return $index !== currentPanel;
      };
      scope.hideLeftClassChange = function($index){
          return $index === currentPanel - 1 || $index === scope.panels.length - 1 && currentPanel === 0 && scope.panels.length > 1;
      };
      scope.hideRightClassChange = function($index){
          return $index === currentPanel + 1 || $index === 0 && currentPanel === scope.panels.length - 1 && scope.panels.length > 1;
      };

      scope.previous = function () {
        currentPanel = currentPanel - 1 < 0 ? scope.panels.length - 1 : currentPanel - 1;
      };

      scope.next = function () {
        currentPanel = currentPanel + 1 >= scope.panels.length ? 0 : currentPanel + 1;
      };

      scope.goto = function(index){
        currentPanel = index;
      };
    }
  }
})
(angular);